<template>
    <div class="release" :style="{height:releaseHeight}">
      <div class="btn" @touchend="heights">
        <img src="../common/icnoPng/release.png"/>
      </div>
      <div>
        <div v-for="(item,index) in datas" :key="index" @touchend="click(index)">
          <div>
            <img :src="item.src"/>
          </div>
          <div>
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="clear"></div>
      <div>
        <div @touchend="addNew">
          <yd-icon name="addFriends" slot="icon" custom size="0.56rem"></yd-icon>
        </div>
        <div>
          <yd-icon name="QRcode" slot="icon" custom size="0.56rem"></yd-icon>
          <div>
            <span>零钱包</span><br>
            <span>余额:</span>
            <span class="font">222</span>
            <span>元</span>
          </div>
        </div>
      </div>
    </div>

</template>
<script>
  import {Icons} from 'vue-ydui/dist/lib.rem/icons'
  import {mapState} from 'vuex'
  import fun from '@/common/js/base/videotype.js'
  export default {
    components:{
      'yd-icon':Icons
    },
    data(){
      return {
        datas:[
          {src:require('common/icnoPng/dynamic.png'),name:'发表',click:'dynamic'},
          {src:require('common/icnoPng/photograph.png'),name:'拍照',click:''},
          {src:require('common/icnoPng/videotape.png'),name:'录像',click:'video'},
          {src:require('common/icnoPng/Q&A.png'),name:'提问',clicck:''},
        ],
      }
    },
    methods:{
      heights(){
        this.$store.commit('release','0');
      },
      click(index){
        switch (this.datas[index].click){
          case 'video':
            fun.getVideo()
            break;
          case 'dynamic':
            this.$router.push({name:'dynamicRelease'})
        }

      },
      addNew(){
       let a={
          type:"friend"
        }
        this.$store.commit("addorfo",a)
        this.$router.push({path:"/common/add"})
      }
    },
    computed:mapState(["releaseHeight"]),
    beforeMount(){
      this.heights();
    },
    watch:{
      '$route':'heights',
    }
  }

</script>
<style lang="less" scoped>
  @import "~less/base";
  .clear{
    clear: both;
  }
  .release{
    width: 100% !important;
    height: 0;
    background: @release-bg;
    position: absolute;
    bottom: 0.24rem;
    transition: 0.5s;
    z-index: 15;
    overflow: hidden;
    >i{
      color: white;
    }
    >div:nth-child(2){
      div{
        width: 25%;
        float: left;
        >div:nth-child(1){
          margin-top: 0.9rem;
          margin-left: 50%;
          transform: translateX(-50%);
          width: 1.20rem;
          height: 1.14rem;
          border-radius: 50%;
          background: @release-btnBg;
          >img{
            margin: 30% 0 0 50%;
            transform: translate(-50%);
            width: 0.48rem;
          }
        }
        >div:nth-child(2){
          color:@release-font;
          width: 100%;
          text-align: center;
          margin-top: 0.24rem;
        }
      }
    }
    >div:nth-child(4){
      margin-top: 0.56rem;
      >div{
        float: left;
      }
      >div:nth-child(1){
        margin-left: 1.2rem;
        width: 1.4rem;
        height: 1.4rem;
        background: @release-btnBg;
        border-radius: 50%;
        overflow: hidden;
        >i{
          margin-top: 50%;
          margin-left: 50%;
          transform: translate(-50%,-50%);
          display: block;
          height: 0.56rem;
          color: @release-btnColor;
        }
      }
      >div:nth-child(2){
        margin-left: 0.5rem;
        width: 3.6rem;
        height: 1.4rem;
        background: @release-btnBg;
        border-radius: 0.2rem;
        >i{
          margin-top: 0.7rem;
          margin-left: 0.24rem;
          transform: translateY(-50%);
          display: inline-block;
          overflow: hidden;
          float: left;
        }
        >div{
          float: left;
          margin-left: 0.25rem;
          margin-top: 0.2rem;
          >span:nth-child(1){
            font-size: 0.32rem;
          }
          >span{
            font-size: 0.24rem;
            color: @release-moneyFont;
            line-height: 0.56rem;
          }
          .font{
            color: @release-moneyNum;
          }
        }
      }
    }
  }
  .btn{
    width: 0.27rem;
    >img{
      width: 100%;
      margin-top: 0.47rem;
      margin-left: 0.38rem;
    }
  }
</style>
